<template>
    <div class="attendanceset">
        <div class="title">
            <div v-for="(item, index) in title" :key="item.id" style="margin-left: 0px;"
                :class="active == index ? 'actives' : ''" @click="active = index">{{ item.title }}</div>
        </div>
        <div v-show="active == 0">
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
                class="demo-ruleForm" :size="formSize" status-icon>
                <el-form-item label="部门" prop="departmentId">
                    <el-select v-model="ruleForm.departmentId" placeholder="Activity zone" style="width: 200px;"
                        @change="selechange">
                        <el-option :label="item.name" :value="item.id" v-for="item in bumendata" />
                    </el-select>
                </el-form-item>
                <el-form-item label="出勤设置" prop="morningStartTime">
                    <div>
                        <div style="display: flex;margin-bottom: 15px">
                            <el-select style="width: 220px;" v-model="ruleForm.morningStartTime" placeholder="00:00">
                                <el-option label="00:00" value="00:00" />
                                <el-option label="00:05" value="00:05" />
                                <el-option label="00:10" value="00:10" />
                                <el-option label="00:15" value="00:15" />
                                <el-option label="00:20" value="00:20" />
                                <el-option label="00:25" value="00:25" />
                                <el-option label="00:30" value="00:30" />
                                <el-option label="00:35" value="00:35" />
                                <el-option label="00:40" value="00:40" />
                                <el-option label="00:45" value="00:45" />
                            </el-select>
                            <div style="margin: 0px 5px;">-</div>
                            <el-select placeholder="08:30" style="width: 220px;" v-model="ruleForm.morningEndTime">
                                <el-option label="08:30" value="08:30" />
                                <el-option label="08:45" value="08:45" />
                                <el-option label="09:00" value="09:00" />
                                <el-option label="09:15" value="09:15" />
                                <el-option label="09:30" value="09:30" />
                                <el-option label="09:45" value="09:45" />
                                <el-option label="10:00" value="10:00" />
                            </el-select>
                        </div>
                        <div style="display: flex;">
                            <el-select placeholder="08:30" style="width: 220px;" v-model="ruleForm.afternoonStartTime">
                                <el-option label="08:30" value="08:30" />
                                <el-option label="08:45" value="08:45" />
                                <el-option label="09:00" value="09:00" />
                                <el-option label="09:15" value="09:15" />
                                <el-option label="09:30" value="09:30" />
                                <el-option label="09:45" value="09:45" />
                                <el-option label="10:00" value="10:00" />
                            </el-select>
                            <div style="margin: 0px 5px;">-</div>
                            <el-select placeholder="08:30" style="width: 220px;" v-model="ruleForm.afternoonEndTime">
                                <el-option label="08:30" value="08:30" />
                                <el-option label="08:45" value="08:45" />
                                <el-option label="09:00" value="09:00" />
                                <el-option label="09:15" value="09:15" />
                                <el-option label="09:30" value="09:30" />
                                <el-option label="09:45" value="09:45" />
                                <el-option label="10:00" value="10:00" />
                            </el-select>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <div v-show="active == 1">
            <leave :ruleForm :rules :formSize :bumendata></leave>
        </div>
        <div v-show="active == 2">
            <Chargebacks :ruleForm :rules :formSize :bumendata></Chargebacks>
        </div>
        <div v-show="active == 3">

        </div>
        <div>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                保存更新
            </el-button>
            <el-button @click="store.$state.dialogVisible = false">取消</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { addSocialTable } from '@/api/Socialtable'
import { useStore } from '@/stores/counter';
import { getAttendanceSetting, saveAttendanceSetting,saveLeaveSetting } from '@/api/attendance'
import { ElMessage } from 'element-plus'
import leave from '../../components/Attendance/leave.vue'
import Chargebacks from '../../components/Attendance/Chargebacks.vue'
const store = useStore();
let bumendata: any = ref([])
let active = ref(0)
let title = ref([
    {
        id: 1,
        title: '出勤设置'
    },
    {
        id: 2,
        title: '请假设置'
    },
    {
        id: 3,
        title: '扣款设置'
    },
    {
        id: 4,
        title: '加班设置'
    }
])
addSocialTable().then((res: any) => {
    bumendata.value = res.data.data
})

interface RuleForm {
    id: number
    companyId: number
    departmentId: number
    morningStartTime: string
    morningEndTime: string
    afternoonStartTime: string
    afternoonEndTime: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    id: 0,
    companyId: 0,
    departmentId: 1,
    morningStartTime: '',
    morningEndTime: '',
    afternoonStartTime: '',
    afternoonEndTime: '',
})

const rules = ref<FormRules<RuleForm>>({
    departmentId: [
        { required: true, message: '请选择部门', trigger: 'blur' },
    ],
    morningStartTime: [
        { required: true, message: '请选择时间', trigger: 'blur' },
    ],
    morningEndTime: [
        { required: true, message: '请选择时间', trigger: 'blur' },
    ],
    afternoonStartTime: [
        { required: true, message: '请选择时间', trigger: 'blur' },
    ],
    afternoonEndTime: [

    ]

})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (active.value == 0) {
                saveAttendanceSetting(ruleForm.value).then(res => {
                    if (res.data.code == 10000) {
                        ElMessage({
                            message: res.data.message,
                            type: 'success',
                        })
                        store.$state.dialogVisible = false
                    } else {
                        ElMessage.error(res.data.message)
                    }
                })
            }else if(active.value == 1){
                
            }

        } else {
            console.log('error submit!', fields)
        }
    })
}
//下拉
const selechange = (e: any) => {
    getAttendanceSetting(e).then(res => {
        ruleForm.value = {
            ...ruleForm.value,
            id: res.data.data.id,
            companyId: res.data.data.companyId,
            morningStartTime: res.data.data.morningStartTime,
            morningEndTime: res.data.data.morningEndTime,
            afternoonStartTime: res.data.data.afternoonStartTime,
            afternoonEndTime: res.data.data.afternoonEndTime,
        }
    })

}
selechange(1)
</script>

<style scoped>
@import '../../assets/attendance.css'
</style>